<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="value" filterable :placeholder="$t('message.select')">
            <el-option
              v-for="item in coinType"
              :key="item.symbol"
              :label="item.symbol"
              :value="item.symbol">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="to"
            :start-placeholder="$t('start-time')"
            :end-placeholder="$t('end-time')">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="commitData">{{$t('message.confirm')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="totalVisible">{{$t('message.tot')}}</el-checkbox>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" class="toolbar" style="padding: 0;">
      <table v-if="totalVisible" class="detailTable detailTable2" border="1" >
        <tr>
          <td>{{$t('message.bid-free')}}（{{unit.split('_')[0]}}）</td>
          <td>
            {{tot.base_deal_fees}}
          </td>
          <td>{{$t('message.ask-free')}}（{{unit.split('_')[1]}}）</td>
          <td>
            {{tot.quote_deal_fees}}
          </td>
          <td>{{$t('message.execute-vol')}}</td>
          <td>
            {{tot.total_amount}}
          </td>
        </tr>
        <tr>
          <td>{{$t('message.vol-change')}}</td>
          <td>
            {{tot.total_amount_change}}
          </td>
          <td>{{$t('message.exe-amount')}}</td>
          <td>
            {{tot.total_money}}
          </td>
          <td>{{$t('message.amount-change')}}</td>
          <td>
            {{tot.total_money_change}}
          </td>
        </tr>
      </table>
    </el-col>

    <!--列表-->
    <el-table
      v-if="!totalVisible"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="symbol"
        :label="$t('message.pair-name')">
      </el-table-column>
      <el-table-column
        prop="type"
        :label="$t('message.type')">
        <template slot-scope="scope">
          <span>{{scope.row.type === '1' ? $t('message.sale') : $t('message.buy')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        :label="$t('message.price')">
      </el-table-column>
      <el-table-column
        prop="deal_amount"
        :label="$t('message.volume')">
      </el-table-column>
      <el-table-column
        prop="deal_fees"
        :label="$t('message.handling-fee')">
      </el-table-column>
      <el-table-column
        prop="total"
        :label="$t('message.total')">
      </el-table-column>
      <el-table-column
        prop="created_at"
        :label="$t('message.time')">
        <template slot-scope="scope">
          <span>{{changeTime(scope.row.created_at)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-if="!totalVisible">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="currentPage"
          :total="pageSize">
        </el-pagination>
      </div>
    </div>
  </section>
</template>

<script>
import { SelfRecode, addedSymbolList } from '../api/api'
// import { timestampToTime } from '../common/js/util'

export default {
  data () {
    return {
      date: '',
      coinType: [],
      value: '',
      tableData: [],
      pageSize: 1,
      tot: {},
      totalVisible: false
    }
  },
  created () {
    addedSymbolList().then((res) => {
      console.log(res)
      if (res.data.code && res.data.code !== 0) {
        this.$message.error(this.$t('message.tip-33'))
      }
      this.coinType = res.data.symbols
    }).catch((res) => {
      console.log(res)
    })
  },
  methods: {
    getData (symbol, pageNum, startTime, endTime) {
      let param = { symbol: symbol, pageNum: pageNum, startTime: startTime, endTime: endTime }
      SelfRecode(param).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.tableData = res.data.results
          this.pageSize = res.data.totalLength
          this.tot = res.data.total
        } else {
          this.$message.error(this.$t('message.tip-34'))
        }
      }).catch(() => {
        this.$message.error(this.$t('message.tip-34'))
      })
    },
    commitData () {
      let symbol = this.value
      let date = this.date
      console.log(symbol)
      console.log(date)
      if (symbol === '' && date === '') {
        this.$message.error(this.$t('message.tip-15'))
      } else {
        this.getData(symbol, 1, date[0].getTime(), date[1].getTime())
      }
    },
    currentPage (page) {
      this.getData(this.value, page, this.date[0].getTime(), this.date[1].getTime())
    },
    change (t) {
      if (t < 10) {
        return '0' + t
      } else {
        return t
      }
    },
    changeTime (timeStamp) {
      let date = new Date(Number(timeStamp)) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = this.change(date.getDate()) + ' '
      let h = this.change(date.getHours()) + ':'
      let m = this.change(date.getMinutes()) + ':'
      let s = this.change(date.getSeconds())
      return Y + M + D + h + m + s
    }
  },
  computed: {
    unit () {
      return this.value
    }
  },
  mounted () {

  }
}

</script>

<style scoped lang="scss">
.pagination {
  overflow: hidden;
  margin-top: 20px;
  div {
    float: right;
    width: 400px;
  }
}
.detailTable {
  width: 100%;
  tr {
    td:nth-child(2), td:nth-child(4), td:nth-child(6) {
      width: 20%;
      background: #fff;
    }
  }
}
</style>
